<template>
  <div class="files_preview">

    <div class="f_v_t active">
      <el-select class="my_el_select f_v_t_margin" style="width: 120px" v-model="broadIsRead" placeholder="全部">
        <el-option label="全部" value="2"></el-option>
        <el-option label="已读" value="1"></el-option>
        <el-option label="未读" value="0"></el-option>
      </el-select>
      <div class="searchDepartment">
        <div class="orgSearch icoo"></div>
        <input id="departinput" type="text" class="homeInput" placeholder="选择发布部门" v-model="departmentLabel"
          readonly="readonly" @focus="showTree = true"  style="margin-right:24px;width:calc(100% - 60px);white-space:nowrap;text-overflow:ellipsis;" />
        <img draggable="false" src="static/image/home/clear_icon.png" class="s_clear_icon" @click="selDepartment()"
          v-show="departmentLabel.trim() != ''" />
        <Un-tree-select v-if="showTree" @selDepartment="selDepartment" @closeTree="closeTree" />
      </div>
      <div class="f_s_w f_v_t_margin">
        <div class="f_s_icon"></div>
        <el-input prefix-icon="el-icon-search" class="my_el_select f_v_t_margin" type="search"
          v-model="broadSearchValue" placeholder="请输入关键字" clearable />
      </div>
      <el-date-picker class="my_el_select my_el_select_time f_v_t_margin" v-model="broadTime" type="daterange"
        align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        :picker-options="$store.state.pickerOptions">
      </el-date-picker>
      <div class="f_v_t_right f_v_t_margin">
        <div class="my_el_select">
          <el-select v-model="optionsBroadValue" placeholder="请选择">
            <el-option v-for="item in optionsBroad" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
          <img :src="
            broadSortDrop
              ? 'static/image/home/sort_drop.png'
              : 'static/image/home/sort_up.png'
          " @click="broadSort" />
        </div>
      </div>
    </div>
    <broad-list v-if="broadListFlagShow" :list.sync="broadList" :broad_show_item="broad_show_item"
      :broad_show_item_index="broad_show_item_index" :dispatchData="setData" @setBroadItem="setBroadItem"
      @deleteBroadItem="deleteBroadItem"></broad-list>
    <div class="page_box" v-show="broadTotal > pageSize">
      <Page class="page_main" :total="broadTotal" show-total :current="files_cur" :page-size="pageSize"
        @on-change="pageChange"></Page>
      <div class="page_foot page_foot_broad">
        <div>跳转至</div>
        <input type="number" min="1" v-model="page_num" />页&nbsp;<button @click.stop.prevent="goPage">确定</button>
      </div>
    </div>
  </div>
</template>
           
<script>
import tools from "@/utils/tools";
import UnTreeSelect from "../universal/unTreeSelect.vue";
import broadList from "./broad_list.vue"; //广播列表
export default {
  components: {
    UnTreeSelect,
    broadList,
  },
  props: [
    "departmentValue",
    // "broadTitleTime",
    "broadList",
    "broad_show_item",
    "broad_show_item_index",
    "broadTotal",
    "sqlTable",
    "workList",
    "broadNoRead",
    "files_cur",
    "pageSize",
    "pageBroadList",
    "broadListFlagShow",
  ],
  watch: {
    // 广播搜索 相关字段
    broadTime: {
      handler(newValue, oldValue) {
        this.$emit("initPage");
        // this.initPage();
      },
    },
    broadSearchValue() {
      this.$emit("initPage");
      //   this.initPage();
    },
    broadIsRead() {
      this.$emit("initPage");
      //   this.initPage();
    },
    page_num() {
      this.$emit("getPageNum", this.broadTotal);
    },
  },
  data() {
    return {
      optionsBroad: [
        {
          value: "选项1",
          label: "标题排序",
        },
        {
          value: "选项2",
          label: "时间排序",
        },
      ],
      broadTitleTime: "",
      page_num: 1,
      dataMsg: {},
      broadSortDrop: true,
      optionsBroadValue: "时间排序",
      broadTime: "",
      broadSearchValue: "",
      showTree: false,
      broadIsRead: "全部",
      departmentLabel: "",
    };
  },
  methods: {
    setBroadItem(e) {
      this.$emit("setBroadItem", e);
      // 2022/5/20 zc新增 每次打开广播更新一次未读数量
      let noRead = this.getBroadNoRead() ? this.getBroadNoRead() : 0;
      this.$set(this.workList[1], "noRead", noRead);
      this.$emit("update:broadNoRead", noRead);
      this.$store.state.broadNoRead = noRead;
    },
    goPage() {
      // 2022/6/21 在跳转页前添加判断是否超过最大页码
      let maxPage = Math.ceil(this.broadTotal / this.pageSize)
      if (this.page_num > maxPage) {
        this.$Message.warning("超过最大页数")
        return
      }
      this.$emit("update:files_cur", parseInt(this.page_num));
      //  this.files_cur = parseInt(this.page_num);

      this.$nextTick(()=>{
        this.broadSearchFn();
      })
    },
    deleteBroadItem(t) {
      this.$emit("deleteBroadItem", t);
    },
    pageChange(index) {

      this.$emit("update:files_cur", index);
      this.$nextTick(()=>{
        this.broadSearchFn();
      })
    },
    //获取未读广播条数
    getBroadNoRead() {
      let res = tools.operationalDatabase(
        `SELECT
            count(isRead) AS num
          FROM
            ${this.sqlTable.broadcastList}
          WHERE
            isRead = '0'
          AND (aType = '0' OR aType = '1'); `,
        1
      );

      console.log(res,1699999999);
      let count = res.list[0].num;
      return count;
    },
    // 广播搜索
    broadSearchFn(page) {
      // 查询未读广播条数
      // this.getSessionBroad();
      let noRead = this.getBroadNoRead() ? this.getBroadNoRead() : 0;
      this.$set(this.workList[1], "noRead", noRead);
      this.$emit("update:broadNoRead", noRead);
      //   this.broadNoRead = noRead; // 新增左侧功能菜单显示广播未读消息
      this.$store.state.broadNoRead = noRead;
      if (this.broadIsRead == 0 && this.broad_show_item != null) return;
      this.$emit("editBroadList", []);
      //   this.broadList = [];
      let pageSizeStart =
        this.files_cur == 1 ? 0 : (this.files_cur - 1) * this.pageSize;
      // 查询字段
      let info = this.broadSearchValue.replace(/\s+/g, "");
      // 查询时间
      let ct1 = "",
        ct2 = "";
      if (this.broadTime) {
        ct1 = new Date(this.broadTime[0]).getTime();
        ct2 = new Date(this.broadTime[1]).getTime();
      }
      let startTimeS = ct1 ? `AND time >= '${ct1}'` : "";
      let endTimeS = ct2 ? `AND time <= '${ct2}'` : "";
      let valueS = info
        ? `AND (value LIKE '%${info}%' OR title LIKE '%${info}%')`
        : "";
      let departmentS = this.departmentValue
        ? `AND (deptIds LIKE '%${this.departmentValue}%')`
        : "";
      let isReadS =
        this.broadIsRead == 2 || this.broadIsRead == "全部"
          ? ""
          : `AND isRead = '${this.broadIsRead}'`;
      let isTimeTitleS;
      switch (this.broadTitleTime) {
        case 1: // 标题正序
          isTimeTitleS = "title ASC";
          break;
        case 2: // 标题倒序
          isTimeTitleS = "title DESC";
          break;
        case 3: // 标题倒序
          isTimeTitleS = "time DESC";
          break;
        case 4: // 标题倒序
          isTimeTitleS = "time ASC";
          break;
        default:
          // 默认时间倒序
          isTimeTitleS = "time DESC";
          break;
      }
      // 获取广播
      let getTotal, res;
      getTotal = tools.operationalDatabase(
        `SELECT count(1) total FROM ${this.sqlTable.broadcastList} WHERE 1=1 ${startTimeS} ${endTimeS} ${valueS} ${departmentS} ${isReadS};`,
        1
      );
      res = tools.operationalDatabase(
        `SELECT a.*,b.* FROM ${this.sqlTable.broadcastList} AS a,${this.sqlTable.userInformation} AS b WHERE a.broadSendId = b.id ${startTimeS} ${endTimeS} ${valueS} ${departmentS} ${isReadS} GROUP BY messageId ORDER BY ${isTimeTitleS} LIMIT '${pageSizeStart}', '${this.pageSize}';`,
        1
      );
      this.$emit("update:broadTotal", getTotal.list[0].total);
      //   this.broadTotal = getTotal.list[0].total;
      this.$emit("editBroadList", this.$utilJs.initBroadFile(res.list || []));
      //   this.broadList = this.$utilJs.initBroadFile(res.list || []);
      // 当前页第一条、最后一条时查询上页、下页广播
      if (page) {
        let newPageSizeStart = page == 1 ? 0 : (page - 1) * this.pageSize;
        let newRes = tools.operationalDatabase(
          `SELECT a.*,b.* FROM ${this.sqlTable.broadcastList} AS a,${this.sqlTable.userInformation} AS b WHERE a.broadSendId = b.id ${startTimeS} ${endTimeS} ${valueS} ${departmentS} ${isReadS} GROUP BY messageId ORDER BY ${isTimeTitleS} LIMIT '${newPageSizeStart}', '${this.pageSize}';`,
          1
        );
        this.$emit(
          "update:pageBroadList",
          this.$utilJs.initBroadFile(newRes.list || [])
        );
        // this.pageBroadList = this.$utilJs.initBroadFile(newRes.list || []);
      }
      this.$forceUpdate();
    },
    setData(data) {
      this.dataMsg = data;
    },
    // 筛选标题-筛选时间(广播)
    broadTitleTimeFn(index) {
      //   this.$emit("update:broadTitleTime", index);
      this.broadTitleTime = index;
      this.$emit("initPage");
      //   this.initPage();
    },
    broadSort() {
      console.log(this.optionsBroadValue);
      this.broadSortDrop = !this.broadSortDrop;
      if (this.optionsBroadValue == "时间排序") {
        this.broadSortDrop
          ? this.broadTitleTimeFn(3)
          : this.broadTitleTimeFn(4);
      } else {
        this.broadSortDrop
          ? this.broadTitleTimeFn(1)
          : this.broadTitleTimeFn(2);
      }
    },

    closeTree() {
      this.showTree = false;
    },
    selDepartment(value) {
      //部门广播查询
      if (value) {
        this.departmentLabel = value.label;

        this.$emit("update:departmentValue", value.id);
        // this.departmentValue = value.id;
      } else {
        this.departmentLabel = "";
        this.$emit("update:departmentValue", "");
        // this.departmentValue = "";
      }
      this.showTree = false;
      this.$emit("initPage");
      //   this.initPage();
    },
  },
};
</script>
<style scoped>
</style>
